<template>
  <div>
    <!-- 表单搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单号">
        <el-input v-model="orderNo" placeholder="订单号"></el-input>
      </el-form-item>

      <el-form-item label="收货人">
        <el-input v-model="consignee" placeholder="收货人"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="phone" placeholder="手机号"></el-input>
      </el-form-item>

      <el-form-item label="订单状态">
        <el-select v-model="orderState" placeholder="订单状态">
          <!-- 用 v-for循环来创建 -->
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 时间选择器 -->
    <div class="block">
      <span class="demonstration">选择时间</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
      >
      </el-date-picker>
      <el-button type="primary" round @click="clickSearch">搜索</el-button>
    </div>

    <!-- 表格数据 -->
    <el-table :data="tableData">
      <el-table-column label="订单号" prop="orderNo"></el-table-column>
      <el-table-column
        label="下单时间"
        prop="orderTime"
        width="200"
      ></el-table-column>
      <el-table-column
        label="手机号"
        prop="phone"
        width="150"
      ></el-table-column>
      <el-table-column label="收货人" prop="consignee"></el-table-column>
      <el-table-column label="配送地址" prop="deliverAddress"></el-table-column>
      <el-table-column
        label="送达时间"
        prop="deliveryTime"
        width="200"
      ></el-table-column>
      <el-table-column label="用户备注" prop="remarks"></el-table-column>
      <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
      <el-table-column label="订单状态" prop="orderState"></el-table-column>
      <el-table-column label="操作" width="100">
        <template>
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template></el-table-column
      >
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { orderList } from "../../../../api/apis";
import { getTime } from "../../../utils/utils";
export default {
  data() {
    return {
      // 查询数据
      orderNo: "", //订单号
      consignee: "", //收货人
      phone: "", //手机号
      orderState: "", //订单状态
      date: [], //日期
      options: ["已完成", "派送中", "已处理", "全部"],

      // 表格数据
      tableData: [],
      // 分页
      pagesize: 5, //每页显示条目个数
      currentPage: 1, //当前页
      total: 1, //总条数
    };
  },

  methods: {
    clickSearch() {
      // getTime(this.date[0]), getTime(this.date[1]);
      //  2022-02-21 00:00:00 2022-02-24 00:00:00
      let { orderNo, consignee, phone, orderState } = this;
      let paramsex = {};
      if (orderNo != "") paramsex.orderNo = orderNo;
      if (consignee != "") paramsex.consignee = consignee;
      if (phone != "") paramsex.phone = phone;
      if (orderState != "" && orderState != "全部")
        paramsex.orderState = orderState;
      if (this.date.length > 0)
        paramsex.date = JSON.stringify([
          getTime(this.date[0]),
          getTime(this.date[1]),
        ]);

      // 函数里面的数据不能被外面用，所以得用      this.paramsex = paramsex;挂载
      this.paramsex = paramsex;
      this.refreshTable(this.paramsex);
    },
    // -----------------封装函数，刷新表格数据-------------------------------
    refreshTable(paramsex) {
      orderList({
        currentPage: this.currentPage,
        pageSize: this.pagesize,
        ...paramsex,
      }).then((res) => {
        // 转换时间格式
        for (let obj of res.data.data) {
          obj.orderTime = getTime(obj.orderTime);
          obj.deliveryTime = getTime(obj.deliveryTime);
        }
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    //------------------------------------ 分页-------------------------------
    // 每页显示条数发生变化
    SizeChange(newpagesize) {
      this.pagesize = newpagesize;
      this.refreshTable(this.paramsex);
    },
    // 当前页发生变化
    CurrentChange(newcurrentPage) {
      this.currentPage = newcurrentPage;
      // 页数发生变化时 带着额外的查询参数重新刷新表格数据
      this.refreshTable(this.paramsex);
    },
  },

  created() {
    this.refreshTable();
  },
};
</script>

<style lang="less" scoped>
.demonstration {
  margin-right: 10px;
  font-size: 14px;
}
.el-button {
  margin-left: 10px;
}
</style>